<template>
  <div class="org-box">
    <!-- <div class="item-box active">
      <div class="item-img">
        <img :src="userInfos.userHeadPortrait"/>
      </div>
      <div class="item-main">
        <span>所属组织：{{ sysOrgData.orgName }}</span>
        <span>加入时间：{{ sysOrgData.createTime }}</span>
      </div>
    </div> -->
    <div class="item-box" v-for="item in sysOrgList" :key="item.uuid" :class="{ active: item.primaryOrganization === 1 }" @click="selectOrg(item)">
      <div class="item-img">
        <img :src="userInfos.userHeadPortrait"/>
      </div>
      <div class="item-main">
        <span>所属组织：{{ item.orgName }}</span>
        <span>加入时间：{{ item.createTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import ARow from "ant-design-vue/es/grid/Row";
  import ACol from "ant-design-vue/es/grid/Col";
  import {mapGetters} from "vuex";

  export default {
    name: "myOrganization",
    components: {ACol, ARow},
    props: {
      userInfos: {
        type: Object,
        default: {}
      },
      sysOrgData: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        sysOrgList: [],
      }
    },
    mounted() {
     this.getOrgList();
    },
    methods: {
      selectOrg(val) {
        if (val.primaryOrganization !== 1) {
          this.$get('/mdata/organization/switchOrganization?' + 'orgId=' + val.id).then(res => {
            if (res.statusCode === 200) {
              this.$message.success(res.message ? res.message : '切换组织成功', 1.5);
              this.getOrgList();
            } else {
              this.$message.error(res.message ? res.message : '切换组织失败', 1.5);
            };
          });
        };
      },
      getOrgList() {
        this.$get('/mdata/organization/currentUserOrganizational').then(res => {
          if (res.statusCode === 200) {
            this.sysOrgList = res.data;
          } else {
            this.$message.error(res.message ? res.message : '获取用户组织信息失败', 1.5);
          };
        })
      },
    },
    computed: {
      ...mapGetters(["nickname", "avatar"]),
    },
  }
</script>

<style scoped lang="less">
  .org-box {
    display: flex;
    flex-wrap: wrap;
    .item-box {
      display: flex;
      padding: 15px 20px;
      max-width: 400px;
      align-items: center;
      border: 1px solid #e8e8e8;
      margin: 0 15px 15px 0;
      .item-img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .item-main {
        display: flex;
        flex-direction: column;
        margin-left: 30px;
      }
    }
    .active {
      border: 1px solid rgb(39, 187, 245);
      position: relative;
    }
    // 对号
    .active::after {
      content: "";
      position: absolute;
      bottom: 5px;
      right: 7px;
      width: 13px;
      height: 22px;
      border-width: 0 4px 4px 0;
      border-color: white;
      border-style: solid;
      transform: rotate(45deg);
    }
    // 蓝色三角
    .active::before {
      content: "";
      position: absolute;
      bottom: -5px;
      right: -21px;
      transform: rotate(-45deg);
      width: 0;
      height: 0;
      border-top: 32px solid rgb(39, 187, 245);
      border-left: 32px solid transparent;
      border-right: 32px solid transparent;
    }
  }

</style>
